/* ==========================================================
   HandbalNL TV — Platform CSS
   Kleurenschema : Donker navy + paars accent (geen oranje)
   Header         : Horizontale balk · logo links · nav naast logo · auth rechts
   Bijgewerkt     : 2026-08-19
   ========================================================== */
/* Roboto via Google Fonts. Tusker 5700 wordt geladen door het JUMP-platform zelf. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Barlow+Condensed:wght@700;800;900&display=swap');
/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
    --hn-black:         #000b2e;
    --hn-navy:          #011145;          /* Achtergrond */
    --hn-navy-mid:      #040e3a;
    --hn-purple:        #b87cff;          /* Primair accent */
    --hn-purple-dark:   #9b5ce0;          /* Hover / actief */
    --hn-purple-mid:    #7c4fd4;          /* Gevuld knopje */
    --hn-white:         #ffffff;
    --hn-muted:         #9ca3af;
    --hn-line:          rgba(255,255,255,0.12);
    --bg_color:         #011145;
}
/* =========================================================
   BODY & TYPOGRAFIE
   ========================================================= */
body {
    background-color: var(--hn-navy) !important;
    font-family: 'Roboto', Arial, sans-serif !important;
    color: var(--hn-white) !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}
/* -----------------------------------------------------------------------
   KOPPEN — font-families volgens brandbook (Tusker Grotesk-cuts)
   -------------------------------------------------------------------------
   BUG die hier is opgelost: de oude regel gebruikte font-family: 'Tusker'
   (zonder cijfer). Er bestaat op de site GEEN @font-face met precies die
   naam — alleen de losse cuts "Tusker 3700" / "Tusker 4700" / "Tusker
   5700" / "Tusker 6700" zijn geladen. Omdat 'Tusker' dus nergens op matcht,
   viel elke kop stil terug op 'Barlow Condensed' — en die werd vervolgens
   met font-weight 700/900 (zie hieronder) gerenderd, wat er veel dikker/
   bolder uitziet dan de bedoelde Tusker Grotesk-look uit het brandbook.
   (Gecontroleerd via getComputedStyle: de live H1 rendert 900-gewicht
   Barlow Condensed i.p.v. Tusker.)
   Brandbook-mapping die we nu volgen:
     H1            -> Tusker Grotesk 6700 (zwaarste cut)
     H2 (primair)  -> Tusker Grotesk 5700
     H2 (secundair)/H3-H6 -> Tusker Grotesk 4700 (lichtste cut)
   Gewicht bewust op 700 (Bold) gehouden i.p.v. 900: deze cuts zijn zelf al
   de zware/bold-varianten van het lettertype, dus 900 erbovenop maakte ze
   onnodig extra dik (dubbel-bold effect).
   ----------------------------------------------------------------------- */
h1, .h1 {
    font-family: 'Tusker 6700', 'Barlow Condensed', 'Impact', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: var(--hn-purple) !important;
}
h2, .h2 {
    font-family: 'Tusker 5700', 'Barlow Condensed', 'Impact', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: var(--hn-purple) !important;
}
h3, h4, h5, h6,
.h3, .h4, .h5, .h6 {
    font-family: 'Tusker 4700', 'Barlow Condensed', 'Impact', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: var(--hn-purple) !important;
}
/* Sectieopschriften: paars met paars accent-lijn links */
h2.section-title,
.section-title,
section > h2:not(.modal *),
.container > h2:not(.modal *),
.ondemand-overview > h2,
[class*="overview"] > h2,
[class*="section"] > h2 {
    color: var(--hn-purple) !important;
    font-size: clamp(18px, 2.5vw, 26px) !important;
    padding-left: 12px !important;
    border-left: 4px solid var(--hn-purple) !important;
    margin-bottom: 16px !important;
}
/* Bodytekst volgens brandbook: Meticula (niet Tusker — Tusker is voor koppen).
   "Body Small" uit het brandbook = Meticula Regular, vandaar font-weight 400. */
p, li, td, th, label, small, .small {
    font-family: 'Meticula', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
/* =========================================================
   NAVBAR — Horizontale balk (KWPN-stijl)
   Logo links · Nav naast logo · Auth rechts
   ========================================================= */
.navbar-header {
    position: relative !important;
    z-index: 1050 !important;
    flex: none !important;
}
.navbar-header nav,
.navbar-header .navbar {
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 60px !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
}
.navbar-header .navbar > .container {
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    padding: 0 20px !important;
    max-width: 100% !important;
    gap: 0 !important;
}
/* Logo: links */
.navbar-header .navbar-brand {
    margin: 0 24px 0 0 !important;
    padding: 6px 0 !important;
    flex-shrink: 0 !important;
    position: static !important;
    transform: none !important;
}
.navbar-header .navbar-brand img {
    max-height: 42px !important;
    width: auto !important;
}
/* Geen gradient over hero — navbar neemt eigen ruimte in */
body::before { display: none !important; }
.navbar-header + * { padding-top: 0 !important; }
nav.navbar.mb-5,
.navbar.mb-5,
.navbar-header .navbar.mb-5 {
    margin-bottom: 0 !important;
}
/* Collapse: vult resterende ruimte — desktop */
@media (min-width: 992px) {
    .navbar-header .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
        flex-grow: 1 !important;
        align-items: center !important;
        height: 60px !important;
        overflow: visible !important;
        background: transparent !important;
    }
}
@media (max-width: 991.98px) {
    .navbar-header .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }
}
/* Nav links: zichtbaar naast logo */
.navbar-header ul.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    list-style: none !important;
}
.navbar-header .navbar-nav .nav-link,
nav.navbar .navbar-nav.mb-2 .nav-link,
nav.navbar .navbar-nav.mb-lg-0 .nav-link {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--hn-white) !important;
    padding: 0 14px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    transition: color 0.15s ease !important;
    border-bottom: 3px solid transparent !important;
    margin-top: 0 !important;
}
.navbar-header .navbar-nav .nav-link:hover,
nav.navbar .navbar-nav.mb-2 .nav-link:hover,
nav.navbar .navbar-nav.mb-lg-0 .nav-link:hover {
    color: var(--hn-purple) !important;
    border-bottom-color: var(--hn-purple) !important;
}
/* Container volledig breed */
nav.navbar .container,
.navbar-header .navbar .container {
    max-width: 100% !important;
    width: 100% !important;
}
/* =========================================================
   AUTH KNOPPEN — rechts
   ========================================================= */
.navbar-header .navbar-nav.ms-auto {
    margin-left: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
    height: 60px !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 5 !important;
}
/* Inloggen: outline paars */
.navbar-header a#authModalLogin.nav-link,
nav.navbar .navbar-nav.ms-auto a#authModalLogin.nav-link {
    background: transparent !important;
    border: 2px solid var(--hn-purple) !important;
    color: var(--hn-purple) !important;
    border-radius: 4px !important;
    padding: 6px 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    height: auto !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    border-bottom: 2px solid var(--hn-purple) !important;
}
.navbar-header a#authModalLogin.nav-link:hover,
nav.navbar .navbar-nav.ms-auto a#authModalLogin.nav-link:hover {
    background: var(--hn-purple) !important;
    color: var(--hn-white) !important;
}
/* Registreren: gevuld paars */
.navbar-header a#authModalRegistration.nav-link,
nav.navbar .navbar-nav.ms-auto a#authModalRegistration.nav-link {
    background-color: var(--hn-purple-mid) !important;
    border: 2px solid var(--hn-purple-mid) !important;
    color: var(--hn-white) !important;
    border-radius: 4px !important;
    padding: 6px 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.navbar-header a#authModalRegistration.nav-link:hover,
nav.navbar .navbar-nav.ms-auto a#authModalRegistration.nav-link:hover {
    background-color: var(--hn-purple-dark) !important;
    border-color: var(--hn-purple-dark) !important;
}
/* Overige tekst in auth-zone */
nav.navbar .navbar-nav.ms-auto .nav-link,
nav.navbar .navbar-nav.ms-auto a {
    color: var(--hn-white) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
/* Ingelogde gebruikersnaam-knop */
nav.navbar .navbar-nav.ms-auto .nav-link.dropdown-toggle.bg-body,
nav.navbar .nav-link.dropdown-toggle.bg-body.rounded.border {
    background-color: var(--hn-purple-mid) !important;
    border-color: var(--hn-purple-mid) !important;
    color: var(--hn-white) !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    height: auto !important;
    padding: 6px 12px !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
/* =========================================================
   DROPDOWN MENU
   ========================================================= */
.navbar-header .dropdown-menu,
.nav-item.dropdown .dropdown-menu {
    background-color: var(--hn-navy-mid) !important;
    border: 1px solid rgba(184,124,255,0.35) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
    margin-top: 0 !important;
}
.navbar-header .nav-item.dropdown .dropdown-menu,
.nav-item.dropdown.position-relative .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    transform: none !important;
}
.navbar-header .dropdown-menu .dropdown-item {
    color: var(--hn-white) !important;
    font-family: 'Tusker 6700', sans-serif !important;
    font-size: 14px !important;
    padding: 9px 16px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.navbar-header .dropdown-menu .dropdown-item:hover {
    background: rgba(184,124,255,0.15) !important;
    color: var(--hn-purple) !important;
    border: none !important;
}
/* =========================================================
   HAMBURGER (mobiel)
   ========================================================= */
.navbar-header .navbar-toggler {
    border: 2px solid var(--hn-purple) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    background: transparent !important;
    box-shadow: none !important;
}
.navbar-header .navbar-toggler:focus { box-shadow: none !important; outline: none !important; }
.navbar-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23b87cff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
/* =========================================================
   KNOPPEN
   ========================================================= */
.btn {
    font-family: 'Tusker 6700', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-radius: 4px !important;
}
.btn-primary, a.btn-primary,
.btn-success, a.btn-success,
.btn-warning, a.btn-warning,
.featured-hero__cta--primary,
.btn.btn-lg {
    background-color: var(--hn-purple-mid) !important;
    border-color: var(--hn-purple-mid) !important;
    color: var(--hn-white) !important;
}
.btn-primary:hover, a.btn-primary:hover,
.btn-success:hover, a.btn-success:hover,
.btn-warning:hover, a.btn-warning:hover,
.featured-hero__cta--primary:hover {
    background-color: var(--hn-purple-dark) !important;
    border-color: var(--hn-purple-dark) !important;
    color: var(--hn-white) !important;
}
/* Secundaire hero CTA */
.featured-hero__cta--secondary {
    background-color: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    color: var(--hn-white) !important;
    backdrop-filter: blur(4px) !important;
}
.featured-hero__cta--secondary:hover {
    background-color: rgba(255,255,255,0.25) !important;
    border-color: var(--hn-white) !important;
}
/* Outline knoppen */
.btn-outline-primary, .btn-outline-light,
.btn-outline-secondary {
    border-color: var(--hn-purple) !important;
    color: var(--hn-purple) !important;
    background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-light:hover,
.btn-outline-secondary:hover {
    background-color: var(--hn-purple) !important;
    border-color: var(--hn-purple) !important;
    color: var(--hn-navy) !important;
}
.btn-info, a.btn-info {
    background-color: var(--hn-purple) !important;
    border-color: var(--hn-purple) !important;
    color: var(--hn-navy) !important;
}
/* =========================================================
   HERO SECTIE
   ========================================================= */
/* Hero-titel (bv. "WELKOM OP HANDBALNL TV"): zelfde fix als hierboven —
   was 'Tusker' (bestaat niet als losstaande font-face) + font-weight 900,
   viel dus terug op Barlow Condensed Black = veel dikker dan de brandbook-
   spec (Tusker Grotesk 6700). Nu de echte "Tusker 6700"-cut, op 700 i.p.v.
   900 zodat hij niet dubbel-bold oogt.
   Extra fix (na feedback "tekst in header zit op elkaar"): line-height
   stond op 0.92, wat precies paste bij de oude fallback (Barlow Condensed)
   maar te krap bleek voor de echte Tusker 6700-cut — die heeft iets meer
   verticale ruimte nodig, waardoor "WELKOM OP" en "HANDBALNL TV" (2 regels)
   elkaar raakten. Getest en gecontroleerd op 1.02 — regels staan nu los
   van elkaar, zonder dat de hero merkbaar meer ruimte inneemt. */
.featured-hero h1,
.featured-hero h2,
.featured-hero__title,
[class*="hero"] h1,
[class*="hero"] h2,
.glide__slide h1,
.glide__slide h2 {
    font-family: 'Tusker 6700', 'Barlow Condensed', 'Impact', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(36px, 5.5vw, 80px) !important;
    line-height: 1.02 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    color: var(--hn-white) !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.7) !important;
}
/* =========================================================
   CARDS & VIDEO ITEMS
   ========================================================= */
.card {
    background-color: var(--hn-navy-mid) !important;
    border: 1px solid var(--hn-line) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
.card, .card * { color: var(--hn-white) !important; }
.card-header {
    background-color: transparent !important;
    border-color: var(--hn-line) !important;
}
.card-body, .card-footer {
    background-color: transparent !important;
    border: none !important;
}
.card-header.text-center.border-0.bg-white { display: none !important; }
/* Fix: stretched-link zit in .card-header — voor advertentiekaarten zichtbaar houden
   zodat de klikbaarheid werkt. Hogere specificiteit (0,6,0) wint van regel hierboven (0,4,0). */
.advertisements .card .card-header.text-center.border-0.bg-white {
    display: block !important;
    height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
p.asset-description { display: none !important; }
.card h1, .card h2, .card h3,
.card h4, .card h5, .card h6 {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--hn-white) !important;
}
a.asset-title,
.asset-title {
    color: var(--hn-white) !important;
    font-weight: 600 !important;
}
a.asset-title:hover,
.asset-title:hover {
    color: var(--hn-purple) !important;
}
.asset { transition: transform 0.2s ease, box-shadow 0.2s ease !important; }
.asset:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
}
/* =========================================================
   PAARSE GRADIENT SECTIES
   ========================================================= */
section.shorts,
section[class*="shorts"],
section[class*="studio"],
section[class*="studio-7m"],
.shorts-section,
.studio-section {
    background: linear-gradient(
        135deg,
        #1a0a4e 0%,
        #3b1fa8 35%,
        #6d28d9 65%,
        #8b5cf6 100%
    ) !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}
section.shorts h2,
section[class*="shorts"] h2,
section[class*="studio"] h2,
.shorts-section h2,
.studio-section h2 {
    border-left-color: var(--hn-white) !important;
    color: var(--hn-white) !important;
}
/* =========================================================
   SLIDER PIJLTJES
   ========================================================= */
.slider-btn,
.slider-btn-next,
.slider-btn-prev,
.glide div[data-glide-el="controls"] .slider-btn {
    background-color: rgba(1,17,69,0.75) !important;
    border: 2px solid var(--hn-purple) !important;
    color: var(--hn-purple) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
}
.slider-btn:hover,
.slider-btn-next:hover,
.slider-btn-prev:hover,
.glide div[data-glide-el="controls"] .slider-btn:hover {
    background-color: var(--hn-purple-mid) !important;
    color: var(--hn-white) !important;
}
/* =========================================================
   BADGES / LIVE LABELS
   ========================================================= */
.badge,
.badge.bg-primary,
.badge.bg-success,
.badge.bg-warning,
.badge.bg-info,
.badge.bg-danger {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}
.badge.bg-danger,
.badge[class*="live"],
.live-badge {
    background-color: #dc2626 !important;
    color: var(--hn-white) !important;
}
.badge.bg-primary,
.badge.bg-success,
.badge.bg-info {
    background-color: var(--hn-purple-mid) !important;
    color: var(--hn-white) !important;
}
.badge.bg-warning {
    background-color: var(--hn-purple) !important;
    color: var(--hn-navy) !important;
}
/* =========================================================
   LINKS
   ========================================================= */
a {
    color: var(--hn-purple) !important;
    transition: color 0.15s !important;
}
a:hover {
    color: var(--hn-purple-dark) !important;
}
/* =========================================================
   FORMULIEREN
   ========================================================= */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"] {
    background-color: var(--hn-navy-mid) !important;
    border-color: rgba(184,124,255,0.35) !important;
    color: var(--hn-white) !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--hn-purple) !important;
    box-shadow: 0 0 0 0.2rem rgba(184,124,255,0.2) !important;
    background-color: var(--hn-navy-mid) !important;
    color: var(--hn-white) !important;
}
.form-label, label { color: var(--hn-white) !important; }
.form-check-input:checked {
    background-color: var(--hn-purple-mid) !important;
    border-color: var(--hn-purple-mid) !important;
}
/* =========================================================
   AUTH MODAL
   ========================================================= */
.modal-content {
    background-color: var(--hn-navy) !important;
    border: 1px solid rgba(184,124,255,0.3) !important;
    border-radius: 8px !important;
}
.modal-content h1, .modal-content h2, .modal-content h3,
.modal-content h4, .modal-content h5, .modal-content h6 {
    color: var(--hn-white) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.modal-content p, .modal-content label,
.modal-content .form-check-label, .modal-content a {
    color: var(--hn-white) !important;
}
.modal-content .form-control {
    background-color: var(--hn-navy-mid) !important;
    color: var(--hn-white) !important;
    border-color: rgba(184,124,255,0.35) !important;
}
.modal-content .btn-primary {
    background: var(--hn-purple-mid) !important;
    border-color: var(--hn-purple-mid) !important;
    color: var(--hn-white) !important;
}
/* Login modal knoppen: beide paars */
#ssoLoginButton {
    background: var(--hn-purple-mid) !important;
    border-color: var(--hn-purple-mid) !important;
    color: #ffffff !important;
}
#ssoLoginButton:hover {
    background: var(--hn-purple-dark) !important;
    border-color: var(--hn-purple-dark) !important;
}
#loginWithPlatformButton {
    background: var(--hn-purple) !important;
    border-color: var(--hn-purple) !important;
    color: var(--hn-navy) !important;
}
#loginWithPlatformButton:hover {
    background: var(--hn-purple-dark) !important;
    border-color: var(--hn-purple-dark) !important;
    color: var(--hn-white) !important;
}
.modal-content .btn-warning {
    background: var(--hn-purple-mid) !important;
    border-color: var(--hn-purple-mid) !important;
    color: #ffffff !important;
}
.modal-content .text-black-50 { color: rgba(255,255,255,0.5) !important; }
/* =========================================================
   DROPDOWN
   ========================================================= */
.dropdown-menu {
    background-color: var(--hn-navy-mid) !important;
    border: 1px solid rgba(184,124,255,0.25) !important;
    border-radius: 6px !important;
}
.dropdown-item {
    color: var(--hn-white) !important;
    font-family: 'Tusker 6700', sans-serif !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(184,124,255,0.15) !important;
    color: var(--hn-purple) !important;
}
/* =========================================================
   TABELLEN
   ========================================================= */
table { background-color: transparent !important; border-color: var(--hn-line) !important; }
thead, tbody, tfoot, tr { background-color: transparent !important; border-color: var(--hn-line) !important; }
td, th { background-color: var(--hn-navy-mid) !important; color: var(--hn-white) !important; border-color: var(--hn-line) !important; }
thead td, thead th { background-color: var(--hn-black) !important; color: var(--hn-muted) !important; font-weight: 700 !important; }
tbody tr:hover td { background-color: rgba(184,124,255,0.06) !important; }
/* =========================================================
   PAGINERING
   ========================================================= */
.page-link {
    background-color: var(--hn-navy-mid) !important;
    border-color: var(--hn-line) !important;
    color: var(--hn-purple) !important;
}
.page-item.active .page-link {
    background-color: var(--hn-purple-mid) !important;
    border-color: var(--hn-purple-mid) !important;
    color: var(--hn-white) !important;
}
/* =========================================================
   VERBERG OVERBODIGE ELEMENTEN
   ========================================================= */
#navbarNotificationsLink { display: none !important; }
a.dropdown-item[href="/first-logon-survey"] { display: none !important; }
.nav-link .position-absolute.bg-danger.rounded-circle { display: none !important; }
/* =========================================================
   ZOEKICOON
   ========================================================= */
.navbar-header button.btn-link { color: var(--hn-purple) !important; }
.navbar-header button.btn-link svg path { fill: var(--hn-purple) !important; }
/* =========================================================
   WATCH PAGINA
   ========================================================= */
.watch-live-v2 { background-color: var(--hn-navy) !important; }
.jump-theater { background-color: var(--hn-navy-mid) !important; }
.jump-info-card { background-color: rgba(255,255,255,0.04) !important; }
.jump-info-description,
.jump-info-description *,
.jump-info-body,
.jump-info-body * { color: var(--hn-white) !important; }
.watch-live-v2 span, .watch-live-v2 small,
.jump-theater span, .jump-theater small { color: var(--hn-white) !important; }
.jump-share-btn {
    background-color: rgba(255,255,255,0.08) !important;
    color: var(--hn-white) !important;
    border: 1px solid rgba(184,124,255,0.35) !important;
}
.jump-share-btn:hover {
    background-color: var(--hn-purple-mid) !important;
    color: var(--hn-white) !important;
    border-color: var(--hn-purple-mid) !important;
}
/* =========================================================
   FOOTER
   ========================================================= */
footer,
.footer-section,
.footer {
    background-color: var(--hn-black) !important;
    color: var(--hn-muted) !important;
    border-top: 1px solid var(--hn-line) !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}
footer *, footer a { color: var(--hn-muted) !important; font-size: 12px !important; }
footer a:hover { color: var(--hn-purple) !important; }
footer p, footer small { display: none !important; }
footer a { display: inline !important; }
footer .card, footer .card-body { background: transparent !important; }
footer .card-body .row.mb-5 { justify-content: center !important; }
footer .card-body .row.mb-5 .col-12.col-md-4 { display: flex !important; justify-content: center !important; }
footer .card-body .row.mb-5 .col-12.col-md-4 > .row { justify-content: center !important; width: auto !important; }
footer .card-body .row.mb-5 .col-12.col-md-4 > .row > .col-8 { display: none !important; }
footer .card-body .row.mb-5 .col-12.col-md-4 > .row > .col-4 { flex: 0 0 auto !important; width: auto !important; text-align: center !important; }
/* =========================================================
   PROFIEL / INSTELLINGEN
   ========================================================= */
.section.py-5, section.py-5 {
    background-color: var(--hn-navy) !important;
    color: var(--hn-white) !important;
}
.section.py-5 .form-control,
section.py-5 .form-control {
    background-color: var(--hn-navy-mid) !important;
    border-color: var(--hn-line) !important;
    color: var(--hn-white) !important;
}
.section.py-5 label, section.py-5 label,
.section.py-5 .text-muted, section.py-5 .text-muted {
    color: var(--hn-muted) !important;
}
.alert.alert-light {
    background-color: var(--hn-navy-mid) !important;
    border-color: var(--hn-line) !important;
    color: var(--hn-white) !important;
}
/* =========================================================
   MOBIEL — collapse & layout
   ========================================================= */
@media (max-width: 991.98px) {
    nav.navbar,
    .navbar-header .navbar {
        height: auto !important;
        min-height: 56px !important;
        max-height: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        align-items: center !important;
        padding: 0 14px !important;
    }
    .navbar-header .navbar > .container {
        height: 56px !important;
        padding: 0 12px !important;
        justify-content: space-between !important;
    }
    .navbar-header .navbar-brand {
        margin: 0 !important;
    }
    .navbar-header .navbar-brand img {
        max-height: 30px !important;
    }
    /* Hamburger: rechts, paars */
    .navbar-header .navbar-toggler {
        margin-left: auto !important;
        position: fixed !important;
        top: 10px !important;
        right: 12px !important;
        z-index: 3000 !important;
        width: 36px !important;
        height: 36px !important;
        padding: 4px !important;
        border: none !important;
        background: transparent !important;
    }
    /* Inloggen-knop mobiel: poppetje-icoon links van hamburger */
    .navbar-header a#authModalLogin.nav-link {
        position: fixed !important;
        top: 10px !important;
        right: 54px !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        font-size: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 3000 !important;
    }
    .navbar-header a#authModalLogin.nav-link::before {
        content: "\f007";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
        font-weight: 900 !important;
        font-size: 20px !important;
        color: var(--hn-purple) !important;
    }
    /* Ingelogde gebruiker: compact naast hamburger */
    .nav-link.dropdown-toggle.bg-body.rounded.border {
        position: fixed !important;
        top: 10px !important;
        right: 54px !important;
        height: 36px !important;
        padding: 0 10px !important;
        z-index: 3000 !important;
        font-size: 12px !important;
        border-radius: 4px !important;
    }
    /* Registreren: verberg in topbar, verschijnt onderaan menu */
    .navbar-header a#authModalRegistration.nav-link {
        display: none !important;
    }
    /* Hamburgermenu: dropdown onder balk */
    .navbar-header .navbar-collapse.show,
    .navbar-header .navbar-collapse.collapsing {
        display: block !important;
        background-color: var(--hn-navy-mid) !important;
        border-top: 2px solid var(--hn-purple) !important;
        padding: 8px 0 16px !important;
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 2000 !important;
        overflow-y: auto !important;
    }
    .navbar-header .navbar-collapse.show .navbar-nav,
    .navbar-header .navbar-collapse.collapsing .navbar-nav {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 20px !important;
        gap: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
    }
    .navbar-header .navbar-collapse.show .navbar-nav .nav-link,
    .navbar-header .navbar-collapse.collapsing .navbar-nav .nav-link {
        height: auto !important;
        padding: 13px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        border-top: none !important;
        border-left: none !important;
        width: 100% !important;
        font-size: 15px !important;
        color: var(--hn-purple) !important;
    }
    /* ms-auto (registreren) onderaan menu */
    .navbar-header .navbar-collapse.show .navbar-nav.ms-auto,
    .navbar-header .navbar-collapse.collapsing .navbar-nav.ms-auto {
        margin-top: auto !important;
        padding: 20px 20px 8px !important;
        border-top: 1px solid rgba(184,124,255,0.25) !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
    }
    .navbar-header .navbar-collapse.show .navbar-nav.ms-auto a#authModalRegistration.nav-link {
        display: flex !important;
        width: auto !important;
        font-size: 14px !important;
        padding: 8px 16px !important;
    }
    /* Auth knoppen mobiel: witte tekst */
    nav.navbar .navbar-nav.ms-auto a#authModalLogin.nav-link,
    nav.navbar .navbar-nav.ms-auto a#authModalRegistration.nav-link {
        width: auto !important;
        color: var(--hn-white) !important;
    }
    /* Zoekknop verbergen mobiel */
    .navbar-header button.btn-link { display: none !important; }
}
/* =========================================================
   GEENTEKST — carrousel zonder titel en omschrijving
   ========================================================= */
.geentekst .featured-hero__title,
.geentekst .featured-hero__lead,
.geentekst .asset .card-title,
.geentekst .asset .card-text,
.geentekst .asset p.fw-bold,
.geentekst .asset p:not(.badge) { display: none !important; }
/* Fix: p-elementen die een stretched-link bevatten mogen niet display:none zijn —
   anders is de kaart niet klikbaar. Hogere specificiteit wint van regel hierboven. */
.geentekst .asset p.fw-bold:has(a.stretched-link),
.geentekst .asset p:not(.badge):has(a.stretched-link) {
    display: block !important;
    height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* =========================================================
   CLUBTVLIST — grote logo-grid (6 kolommen breed)
   ========================================================= */
.CLUBTVlist .row > div {
  flex: 0 0 16.6666667% !important;
  max-width: 16.6666667% !important;
}
@media (max-width: 767px) {
  .CLUBTVlist .row > div {
    flex: 0 0 33.3333333% !important;
    max-width: 33.3333333% !important;
  }
}
/* =========================================================
   CLUBTVLISTSMALL — kleine ronde logo-carrousel, volle breedte,
   zonder titel/border, langzaam doordraaiend
   ========================================================= */
.CLUBTVlistsmall {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.CLUBTVlistsmall h3 {
  display: none !important;
}
.CLUBTVlistsmall .glide__track {
  overflow: hidden;
}
.CLUBTVlistsmall .glide__slide {
  width: 80px !important;
  margin-right: 10px !important;
}
.CLUBTVlistsmall .glide__slide .card {
  border: none !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}
.CLUBTVlistsmall .glide__slide .card-header {
  display: none !important;
}
.CLUBTVlistsmall .glide__slide .card-body {
  padding: 0 !important;
}
.CLUBTVlistsmall .glide__slide img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  border-radius: 50% !important;
  display: block;
  margin: 0 auto;
}
.CLUBTVlistsmall .glide__slides {
  animation: clubtvSmallScroll 90s linear infinite alternate;
}
.CLUBTVlistsmall .glide__slides:hover {
  animation-play-state: paused;
}
@keyframes clubtvSmallScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-3000px, 0, 0); }
}

/* =========================================================================
   WATCH-PAGINA — beschrijving + countdown-klok in Meticula
   -------------------------------------------------------------------------
   Waar        : elke /watch/... pagina (bv. de Super Cup livestream-pagina)
   Wat         : 1) de tekst onder "About this stream" (de wedstrijd-
                    beschrijving), selector .jump-info-description
                 2) de countdown-klok "This event will start in ... days,
                    ... hours..." boven de speler, selector .video-player strong
   Waarom      : klant-verzoek om deze twee tekst-elementen in het merk-
                    lettertype "Meticula" te zetten i.p.v. het standaard
                    display-font Tusker 6700
   Belangrijk  : "Meticula" bleek al als @font-face op de site geladen te
                    zijn (dus geen extra font-bestand/@font-face nodig hier).
                    Tusker 6700 staat als fallback voor als Meticula om wat
                    voor reden dan ook niet laadt.
   ========================================================================= */
.jump-info-description,
.video-player strong {
  font-family: 'Meticula', "Tusker 6700", Arial, sans-serif !important;
}

/* =========================================================================
   SHORTS — ondertitel in Meticula
   -------------------------------------------------------------------------
   Waar        : homepage, "Shorts"-sectie — de subtekst direct onder de
                    kop "Shorts" ("Beleef de mooiste momenten van binnen
                    én buiten het speelveld. Upload je eigen video's...")
   Selector    : .collection-carousel__description (dit is het element,
                    gevonden door in de live-DOM te zoeken op de tekst)
   Waarom      : klant-verzoek, zelfde reden/aanpak als hierboven — ook
                    hier valt de tekst terug op Tusker 6700 als Meticula
                    niet beschikbaar zou zijn.
   ========================================================================= */
.collection-carousel__description {
  font-family: 'Meticula', "Tusker 6700", Arial, sans-serif !important;
}

/* =========================================================================
   HEADER (navbar) — minder dikke teksten
   -------------------------------------------------------------------------
   Waar        : de site-brede navigatiebalk bovenaan (in dit bestand
                    verderop "Header" genoemd, sectie .navbar-header),
                    dus: de menu-links LIVE / VIDEO'S / COMPETITIES, de
                    knoppen INLOGGEN / REGISTREREN, en de ingelogde
                    gebruikersnaam-knop rechtsboven.
   Wat         : al deze navbar-teksten stonden origineel op
                    font-weight: 700 !important (zie de losse regels
                    verderop in dit bestand onder "NAVBAR" / "AUTH
                    KNOPPEN" — die regels laten we bewust ongewijzigd
                    staan zodat de originele bron zichtbaar blijft; deze
                    blok hieronder overschrijft ze met een !important van
                    hogere specificiteit).
   Waarom      : klant vond de header-teksten te "dik" ogen. Gewicht
                    verlaagd van 700 (bold) naar 500 (medium) voor een
                    rustiger, minder zwaar ogende balk. Lettergrootte,
                    hoofdletters en letter-spacing blijven ongewijzigd.
   Let op      : als er later een nieuwe navbar-tekstregel wordt
                    toegevoegd met een eigen font-weight: 700 !important,
                    override die dan hier ook mee — anders wijkt hij af
                    van de rest van de header.
   ========================================================================= */
.navbar-header .navbar-nav .nav-link,
nav.navbar .navbar-nav.mb-2 .nav-link,
nav.navbar .navbar-nav.mb-lg-0 .nav-link,
.navbar-header a#authModalLogin.nav-link,
nav.navbar .navbar-nav.ms-auto a#authModalLogin.nav-link,
.navbar-header a#authModalRegistration.nav-link,
nav.navbar .navbar-nav.ms-auto a#authModalRegistration.nav-link,
nav.navbar .navbar-nav.ms-auto .nav-link,
nav.navbar .navbar-nav.ms-auto a,
nav.navbar .navbar-nav.ms-auto .nav-link.dropdown-toggle.bg-body,
nav.navbar .nav-link.dropdown-toggle.bg-body.rounded.border {
  font-weight: 500 !important;
}

h2.faq-title.mb-5.text-center {
    border-left: 0 !important;
}